<template>
  <div class="map-barriers" name="map-barriers">
    <i
      name="map-barrier"
      class="ewg-icon-icon_duizhan degree_0"
      :class="`degree_${barriserDegree(item.averageLevel)}`"
      v-for="item of barriers"
      :key="item.id"
      :style="{
        left: item.position.x - 30 + 'px',
        top: item.position.y - 30 + 'px'
      }"
      :positionX="item.position.x"
      :positionY="item.position.y"
      :barrierId="item.id"
      :title="showBarriers(item)"
      @click.stop="handleBattle(item)"
    ></i>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive } from "vue";
import {
  barriers as barriersData,
  barrierMap,
  Barriers
} from "@/const/barriers";
import { useStore } from "@/store";
import { SysInfo } from "@/const/sys";
import { SysActionTypes } from "@/store/sys/action-types";
import { confirm } from "@/util/confirm";
const store = useStore();
const MapBarriers = defineComponent({
  setup(props, context) {
    const barriers = reactive(barriersData);
    const degreeType = reactive(barrierMap.degree);
    const barriserDegree = (averageLevel: number) => {
      // 更具穿戴装备平均等级(单件等级) 和 关卡预设难度等级 差值 体现副本难度, 范围 0 - 4
      const difLevel = averageLevel - store.getters.wearEquipAverageLevel;
      return Math.min(Math.max(difLevel, 0), 4);
    };
    const showBarriers = ({ name, averageLevel }: Barriers) => {
      const title = `副本：${name}\r\n难度：${
        degreeType[barriserDegree(averageLevel)]
      }\r\n推荐装等：${averageLevel}级`;
      return title;
    };
    const handleBattle = async ({
      name,
      id,
      position,
      averageLevel
    }: Barriers) => {
      const res = await confirm(`前方危险，是否前往${name}`);
      if (res) {
        store.dispatch(
          SysActionTypes.SYS_PUSH_INFO,
          new SysInfo(
            `开启战斗：${name}，难度：${
              degreeType[barriserDegree(averageLevel)]
            }`,
            4
          )
        );
        context.emit("startbattle", id);
        context.emit("changecurrentp", position);
      }
    };

    return {
      barriers,
      showBarriers,
      handleBattle,
      barriserDegree
    };
  }
});
export type MapBarriersRefs = InstanceType<typeof MapBarriers>;
export default MapBarriers;
</script>
<style lang="scss" scoped>
.map-barriers {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  i {
    position: absolute;
    font-size: 60px;
    background-image: linear-gradient(180deg, #70f570, #49c628);
    background-clip: text;
    color: transparent;
    cursor: pointer;
    top: 0;
    left: 0;
    &.degree_0 {
      background-image: linear-gradient(180deg, #70f570, #49c628);
    }
    &.degree_1 {
      background-image: linear-gradient(180deg, #ffa8a8, #fcff00);
    }
    &.degree_2 {
      background-image: linear-gradient(180deg, #ffaa85, #b3315f);
    }
    &.degree_3 {
      background-image: linear-gradient(180deg, #eece13, #b210ff);
    }
    &.degree_4 {
      background-image: linear-gradient(180deg, #f05f57, #360940);
    }
    &:hover {
      animation: scaleDong 0.5s infinite;
    }
    &:active {
      opacity: 0.8;
    }
  }
}
</style>
